<template>
  <div class="vote-item" :class="{'vote-item-bg':ranking<=3,'vote-item-bg-1':ranking==1}">
    <div class="top-brand-img" v-if="showTop10Brand"></div>
    <!-- v-lazy:background-image="img" :key="img" -->
    <div class="vote-img" :class="{border: ranking>10}">
      <img src="../../../assets/img/vote-img-border.png" alt="" class="vote-img-border" v-if="ranking<=10">
      <img src="../../../assets/img/crown-1.png" alt="" class="vote-crown" v-if="ranking==1">
      <img src="../../../assets/img/crown-2.png" alt="" class="vote-crown" v-if="ranking==2">
      <img src="../../../assets/img/crown-3.png" alt="" class="vote-crown" v-if="ranking==3">
      <div class="vote-logo" v-lazy:background-image="img" :key="img"></div>
    </div>
    <div class="vote-info">
      <div class="vote-name">
        <div class="vote-ranking-number" v-if="ranking>3" :class="{'vote-ranking-number-10':ranking<=10}">
          <div class="ranking-number">
            {{ranking}}<span v-if="ranking>10">.</span>
          </div>
        </div>
        <div class="vote-name-inner" v-if="showName" :class="{'one-line':showVoteCount && isWeiXin && isPhone, 'two-line': !showVoteCount || !(isWeiXin&&isPhone)}">{{shortName}}</div>
      </div>
      <div class="vote-number-text" v-if="showVoteCount && isWeiXin&&isPhone">投票数</div>
      <div class="vote-number" v-if="showVoteCount && isWeiXin&&isPhone">{{votes}}</div>
    </div>
    <div class="vote-btn-box" :class="{'no-wx': !(isWeiXin&&isPhone), 'no-ticket': !(showVoteCount && isWeiXin&&isPhone)}">
      <button type="button" class="btn" v-if="showVote" @click.prevent.stop="onVoteClick">立即投票</button>
      <button type="button" class="btn" v-if="showApply" @click.prevent.stop="onApply">申请奖牌</button>
      <span v-if="showOver">活动已结束~</span>
      <span v-if="showNotStart">活动未开始~</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shortName: { // 企业名称
      type: String,
      default: ''
    },
    img: { // 企业logo
      type: String,
      default: ''
    },
    ranking: { // 排名
      type: [String, Number],
      default: 0
    },
    votes: { // 投票数
      type: [String, Number],
      default: 0
    },
    status: { // 当前投票状态
      type: Number,
      default: 0
    },
    itemid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isWeiXin: false,
      isPhone: false,
      showName: true
    }
  },
  created() {
    // 手机端微信
    this.isWeiXin = this.$getDeviceInfo().isWeiXin && this.$getDeviceInfo().isPhone
    this.isPhone = this.$getDeviceInfo().isPhone
    // 解决名字过长 css失效问题
    if (this.shortName.length > 7) {
      this.showName = false
      setTimeout(() => {
        this.showName = true
      }, 100)
    }
  },
  computed: {
    showTop10Brand() {
      if ((this.status === 2 || this.status === 5) && this.ranking <= 10) {
        return true
      } else {
        return false
      }
    },
    showVote() { // 是否显示投票按钮
      return this.status === 1
    },
    showOver() {
      if (this.status === 0) {
        return true
      } else if (this.status === 4) {
        return true
      } else if (this.status === 2 && this.ranking > 10) {
        return true
      } else {
        return false
      }
    },
    showNotStart() {
      return this.status === 3
    },
    showApply() {
      if ((this.status === 2 || this.status === 5) && this.ranking <= 10) {
        return true
      } else {
        return false
      }
    },
    showVoteCount() {
      if (this.status === 3 || this.status === 4) {
        return false
      } else {
        return true
      }
    },
    showNumberImg() {
      if (this.ranking === 1 || this.ranking === 2 || this.ranking === 3) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    onVoteClick() {
      this.$emit('vote')
    },
    onApply() {
      this.$emit('apply')
    }
  }
}
</script>

<style scoped lang="scss">
.vote-item {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 6.9rem;
  height: 1.86rem;
  margin: 0 auto 0.25rem auto;
  padding: 0.24rem;
  box-shadow: 0 0.01rem 0.04rem 0 rgba(131, 131, 131, 0.1);
  border-radius: 0.14rem;
  background: #fff center no-repeat;
  background-size: cover;
  &.vote-item-bg {
    background-image: url(../assets/vote-item-bg.png);
    border: 2px solid #f0d48f;
  }
  &.vote-item-bg-1 {
    background-image: url(../assets/vote-item-bg-1.png);
  }
  .top-brand-img {
    position: absolute;
    width: 1.57rem;
    height: 1.24rem;
    top: 0;
    right: 0;
    background: url(../assets/top-10-brand.png) center no-repeat;
    background-size: contain;
  }
  .vote-img {
    position: relative;
    min-width: 2.13rem;
    width: 2.13rem;
    height: 1.28rem;
    border-radius: 0.08rem;
    background: center no-repeat;
    background-size: contain;
    align-self: center;
    margin: 0.05rem 0 0 0.05rem;
    .vote-logo {
      width: 2rem;
      height: 1rem;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .vote-img-border {
      width: 2.23rem;
      height: 1.38rem;
      min-width: 2.23rem;
      margin: -0.05rem 0 0 -0.05rem;
    }
    .vote-crown {
      position: absolute;
      width: 0.98rem;
      height: 0.5rem;
      top: -0.4rem;
      left: 0.59rem;
    }
    &.border {
      border: 1px solid rgba(216, 216, 216, 1);
    }
  }
}
.vote-btn-box {
  position: absolute;
  right: 0.3rem;
  bottom: 0.3rem;
  // padding: 0 0.06rem 0.06rem 0;
  &.no-wx {
    top: 50%;
    margin-top: -0.26rem;
  }
  &.no-ticket {
    top: 50%;
    margin-top: -0.12rem;
  }
  .btn {
    box-sizing: border-box;
    width: 1.24rem;
    min-width: 1.24rem;
    padding: 0.14rem 0;
    background: rgba(255, 215, 77, 1);
    border-radius: 0.1rem;
    font-size: 0.24rem;
    line-height: 0.24rem;
    font-weight: 500;
    color: #54574a;
  }
  span {
    display: inline-block;
    font-size: 0.24rem;
    line-height: 0.24rem;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 0.15rem;
  }
}
.vote-info {
  margin-left: 0.24rem;
  margin-top: 0.1rem;
  align-self: center;
  max-width: 3.7rem;
  overflow: hidden;

  .vote-name {
    max-height: 0.7rem;
    display: flex;
    align-items: center;
    font-size: 0.34rem;
    line-height: 0.35rem;
    // font-weight: 700;
    color: #444444;
    .vote-ranking-number-img {
      margin-right: 0.1rem;
      display: inline-block;
      vertical-align: middle;
      img {
        height: 0.37rem;
        width: auto;
        vertical-align: middle;
      }
    }
  }
  .vote-number-text {
    margin-top: 0.15rem;
    font-size: 0.24rem;
    line-height: 0.24rem;
    font-weight: 500;
    color: rgba(186, 186, 186, 1);
  }
  .vote-number {
    margin-top: 0.07rem;
    font-size: 0.36rem;
    line-height: 0.36rem;
    font-weight: bold;
    color: rgba(252, 117, 8, 1);
  }
  .vote-ranking-number {
    display: inline-block;
    width: 0.44rem;
    height: 0.44rem;
    font-size: 0.46rem;
    line-height: 0.46rem;
    font-weight: bold;
    color: rgba(153, 153, 153, 1);
    position: relative;
    .ranking-number {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.5);
    }
  }
  .vote-ranking-number-10 {
    min-width: 0.44rem;
    width: 0.44rem;
    height: 0.44rem;
    text-align: center;
    background: url(../../../assets/img/vote-ranking-bg.png) center no-repeat;
    background-size: contain;
    font-size: 0.6rem;
    line-height: 0.6rem;
    color: rgba(124, 80, 30, 1);
    margin-right: 0.1rem;
  }
  .top10-ranking {
    display: inline-block;
    width: 0.44rem;
    height: 0.44rem;
    text-align: center;
    background: url(../assets/vote-success-ranking-bg.png) center no-repeat;
    background-size: contain;
    font-size: 0.46rem;
    line-height: 0.46rem;
    color: rgba(124, 80, 30, 1);
    margin-right: 0.1rem;
  }
  .vote-name-inner {
    max-width: 2rem;
    &.one-line {
      display: inline-block;
      width: 3.7rem;
      // max-width: 3.7rem;
      line-height: 0.42rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    &.two-line {
      max-width: 1.6rem;
      line-height: 0.38rem;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
    }
  }
}
</style>
